const adminBtn = document.getElementById("adminBtn");
const studentBtn = document.getElementById("studentBtn");
const header = document.getElementById("header");
const loginBtn = document.getElementById("loginBtn");
const passwordInput = document.getElementById("password");
const togglePassword = document.getElementById("togglePassword");

adminBtn.addEventListener("click", () => {
  adminBtn.classList.add("active-admin");
  studentBtn.classList.remove("active-student");
  loginBtn.classList.remove("green");
  loginBtn.classList.add("red");
  header.style.background = "linear-gradient(to right, #b91c1c, #ef4444)";
});

studentBtn.addEventListener("click", () => {
  studentBtn.classList.add("active-student");
  adminBtn.classList.remove("active-admin");
  loginBtn.classList.remove("red");
  loginBtn.classList.add("green");
  header.style.background = "linear-gradient(to right, #16a34a, #15803d)";
});

togglePassword.addEventListener("click", () => {
  const type =
    passwordInput.getAttribute("type") === "password" ? "text" : "password";
  passwordInput.setAttribute("type", type);
  togglePassword.classList.toggle("active");
});

const pills = document.querySelectorAll("#tabs .nav-pill");
const contents = document.querySelectorAll(".tab-content");

pills.forEach((pill) => {
  pill.addEventListener("click", () => {
    pills.forEach((p) => p.classList.remove("active"));
    pills.forEach((p) => p.classList.add("faded"));
    pill.classList.add("active");
    pill.classList.remove("faded");

    const target = pill.getAttribute("data-target");
    contents.forEach((c) => c.classList.remove("active"));
    document.getElementById(target).classList.add("active");
  });
});